export class RenderView {
    textModel_;
    selectionModel_;
    viewContainer_;
    constructor (textModel, selectionModel, viewContainer) {
        this.textModel_ = textModel
        this.selectionModel_ = selectionModel
        this.viewContainer_ = viewContainer
        this.addEventListener()
    }
    // 监听数据模型，数据模型发生了变化，就调用render方法，渲染页面
    addEventListener () {
        // 注册文本的数据模型
        this.textModel_.on('text-change', this.render.bind(this))
    }
    // 更新光标
    updateDomSelection () {
        // 获取原生的选区
        const domSelection = window.getSelection()
        if (domSelection) {
            const selectionFromModel = this.selectionModel_.getSelection()
            const anchor = selectionFromModel.anchor
            // 创建一个选区
            const range = window.document.createRange()
            // 设置选区开始的位置
            range.setStart(this.viewContainer_.childNodes[0], anchor)
            // 设置选区结束的位置
            range.setEnd(this.viewContainer_.childNodes[0], anchor)
            // 移除所有的选区
            domSelection.removeAllRanges()
            // 添加当前新创建的选区
            domSelection.addRange(range)  
        }
        
    }
    render () {
        this.viewContainer_.innerHTML = this.textModel_.getSpacers() + '\n'
        setTimeout(() => {
            this.updateDomSelection()
        }, 0)
    }
}
export default RenderView